import React from 'react'
import { Head, Topic, PopUp } from './style'
import { connect } from 'react-redux'
import { homework, answerRecord } from '../../api'
import { Toast } from 'antd-mobile'
class Index extends React.PureComponent {
  state = {
    info: '',
    index: 0,
    isAnser: false,
    isPopShow: false,
    correct_list: [],
    wrong_list: [],
    answersIndex: []
  }
  componentDidMount() {
    this.getDetail()
  }
  getDetail() {
    homework({
      sid: this.props.match.params.sid,
      cid: this.props.match.params.cid,
      limit: 100
    }).then(res => {
      this.setState({
        info: res.data
      })
    })
  }
  setNext() {
    if (!this.state.info.data[this.state.index].isAnser) {
      Toast.info('请先回答本题', 3)
      return false
    } else {
      this.setState({
        isAnser: true,
        answersIndex: this.state.info.data[this.state.index].isAnser
      })
    }

    if (!this.state.isAnser) {
      this.setState({
        isAnser: true
      })
      // 记录对错
      if (this.state.answersIndex.sort().join('') === this.compare().join('')) {
        let listArr = this.state.correct_list
        listArr.push(this.state.info.data[this.state.index].id)
        this.setState({
          correct_list: listArr
        })
      } else {
        let listArr = this.state.wrong_list
        listArr.push(this.state.info.data[this.state.index].id)
        this.setState({
          wrong_list: listArr
        })
      }
      console.log(this.state.correct_list, this.state.wrong_list)
      if (this.state.index + 1 === this.state.info.data.length) {
        answerRecord({
          subject_id: this.props.match.params.sid,
          course_id: this.props.match.params.cid,
          work_id: this.state.info.data[0].work_id,
          member_id: this.props.userInfo.id,
          correct: this.state.correct_list.length
            ? this.state.correct_list.length
            : 0,
          correct_list: this.state.correct_list.join(','),
          wrong: this.state.wrong_list.length
            ? this.state.wrong_list.length
            : 0,
          wrong_list: this.state.wrong_list.join(','),
          score: this.state.correct_list.length
            ? this.state.correct_list.length
            : 0
        }).then(res => {
          // Toast.info('答题成功！', 3)
          this.setState({
            isPopShow: true
          })
        })
      }
      return false
    }

    if (this.state.index + 1 === this.state.info.data.length) {
      return false
    } else {
      if (!this.state.info.data[this.state.index + 1].isAnser) {
        this.setState({
          index: this.state.index + 1,
          isAnser: false,
          answersIndex: []
        })
      } else {
        this.setState({
          index: this.state.index + 1,
          answersIndex: this.state.info.data[this.state.index + 1].isAnser
        })
      }
    }
  }
  setPrev() {
    if (this.state.index + 1 === 1) {
      return false
    } else {
      this.setState({
        isAnser: true,
        answersIndex: this.state.info.data[this.state.index - 1].isAnser,
        index: this.state.index - 1
      })
    }
  }
  // 答题
  anSwerFn(m, i) {
    if (this.state.isAnser) {
      return false
    }
    this.setState(prevState => {
      delete prevState.answersIndex
      return prevState
    })
    let info = this.state.info

    if (m === 1) {
      if (this.state.answersIndex) {
        let arr = this.state.answersIndex
        if (this.state.answersIndex.indexOf(i) > -1) {
          arr.splice(arr.indexOf(i), 1)
          this.setState({
            answersIndex: arr
          })
        } else {
          arr.push(i)
          this.setState({
            answersIndex: arr
          })
        }
        info.data[this.state.index].isAnser = arr
      } else {
        this.setState({
          answersIndex: [i]
        })
        info.data[this.state.index].isAnser = [i]
      }
    } else {
      this.setState({
        answersIndex: [i]
      })
      info.data[this.state.index].isAnser = [i]
    }

    this.setState({
      info
    })
  }
  compare() {
    let arrAns = []
    this.state.info.data[this.state.index].answers.map((item, index) => {
      if (item.as_correct === 1) {
        arrAns.push(index)
      }
      return false
    })
    return arrAns
  }
  answersTo() {
    let answ = ''
    let btArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    this.state.info.data[this.state.index].answers.map((item, index) => {
      if (item.as_correct === 1) {
        answ += btArr[index]
      }
      return false
    })
    return answ
  }
  isSeleted(index) {
    console.log(`11111` + index, this.state.answersIndex)
    if (typeof this.state.answersIndex === 'object') {
      return this.state.answersIndex.indexOf(index) > -1
    } else {
      return this.state.answersIndex === index
    }
  }
  showPopXx() {
    this.setState({
      isPopShow: true
    })
  }
  hidePopXx() {
    this.setState({
      isPopShow: false
    })
    this.props.history.goback()
  }
  render() {
    let btArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    return (
      <div>
        {this.state.info && this.state.info.data.length && (
          <div>
            <Head>
              <h2>课程：{this.state.info.title}</h2>
              <p>
                共{this.state.info.data.length}题，其中单选题
                {this.state.info.singles}道，多选题{this.state.info.judges}
                道，判断题{this.state.info.multiples}道
              </p>
            </Head>

            <Topic>
              <div className="title">
                <span>
                  {this.state.index + 1}/{this.state.info.data.length}
                </span>
                {this.state.info.data[this.state.index].mode === 0 && '单选题'}
                {this.state.info.data[this.state.index].mode === 1 && '多选题'}
                {this.state.info.data[this.state.index].mode === 2 && '判断题'}
              </div>
              <h4>{this.state.info.data[this.state.index].content}</h4>
              <ul>
                {this.state.info.data[this.state.index].answers.map(
                  (item, index) => {
                    return this.state.answersIndex === index ||
                      this.state.answersIndex.indexOf(index) > -1 ? (
                      <li
                        className="atthis"
                        key={item.id}
                        onClick={this.anSwerFn.bind(
                          this,
                          this.state.info.data[this.state.index].mode,
                          index
                        )}
                      >
                        {btArr[index]}.{item.content}
                      </li>
                    ) : (
                      <li
                        key={item.id}
                        onClick={this.anSwerFn.bind(
                          this,
                          this.state.info.data[this.state.index].mode,
                          index
                        )}
                      >
                        {btArr[index]}.{item.content}
                      </li>
                    )
                  }
                )}
              </ul>
              <div className="btn">
                <button onClick={this.setPrev.bind(this)}>返回</button>
                <button className="next" onClick={this.setNext.bind(this)}>
                  下一题
                </button>
              </div>
            </Topic>

            {this.state.isAnser && (
              <Topic>
                <h4>{this.state.info.data[this.state.index].content}</h4>
                <ul>
                  {this.state.info.data[this.state.index].answers.map(
                    (item, index) => {
                      return item.as_correct === 1 ? (
                        <li className="atthis" key={item.id}>
                          {btArr[index]}.{item.content}
                        </li>
                      ) : (
                        <li key={item.id}>
                          {btArr[index]}.{item.content}
                        </li>
                      )
                    }
                  )}
                </ul>
                <div className="da">
                  <span>答案：{this.answersTo()}</span>
                  <p>解析：{this.state.info.data[this.state.index].analysis}</p>
                </div>
              </Topic>
            )}
          </div>
        )}

        <PopUp className={this.state.isPopShow ? 'show' : ''}>
          <div className="content">
            <h2>学习奖励说明</h2>
            <p>
              完整观看一个专业视频，可获0.5元心意奖；答对一道专业题目，可获0.5元心意奖；（提现可联系客服）学习完视频并且答对每道专业题，可获得职业“推荐人”特权,赚取每瓶产品的差价以及发展团队。
            </p>
            <b onClick={this.hidePopXx.bind(this)}>确定</b>
            <i className="iconfont" onClick={this.hidePopXx.bind(this)}>
              &#xe628;
            </i>
          </div>
        </PopUp>
      </div>
    )
  }
}
const mapStateToProps = state => ({
  userInfo: state.userInfo
})

export default connect(mapStateToProps)(Index)
